<template>
  <fieldset>
    <legend>商品</legend>
    <h1>sssssss</h1>
    <ul>
      <li v-for="item in products" :key="item.id">
        <b>
         产品名称: {{ item.title }}
        </b>
        ----
        <b>价格：
         {{ item.price }}

        </b>
        ----
        <b>
         库存：{{item.inventory}} 
         </b>
      ----
      <button @click="add(item)" :disabled= " item.inventory===0">点击加入购物车</button>
      </li>
    </ul>
  </fieldset>
</template>
<script>
import { mapActions, mapState, } from "vuex";
export default {
  methods: {
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapActions('cart',['ADD_TO_CART']),
    add(item){
    this.ADD_TO_CART(item)
    }
  },
  computed: {
    ...mapState("product", ["products"]),
    
  },
  mounted() {
    this.FETCH_PRODUCT();
  },
};
</script>
